<template>
  <view>
    <view class="bigTopBox">
      <text class="textLis1" style="font-size: 14px;">可用积分</text>
      <text class="textLis2" style="font-size: 36px;">5000</text>
      <text class="textLis3" style="font-size: 14px;">已用积分：</text>
      <text class="textLis4" style="font-size: 14px;">总积分：</text>
    </view>
    <!-- 跳转到积分商城 -->
    <view class="bigHeaderbox" @click="toJifen">
      <view>
        <image class="urlimge" :src='url'></image>
        <text style="line-height: 45px;font-size: 14px;">积分商城</text>
      </view>
      <view class="icoMg">
        <text style="font-size: 12px;color: #999999;">更多礼品等你来兑换</text>
        <image class="urlimge2" :src='url2'></image>
      </view>
    </view>
    <!-- 下方列表 -->
    <view class="footList" v-for="item in productList" :key="item.id">
      <view class="flist">
        <text class="productName">{{item.name}}</text>
        <text :class="item.text.indexOf('获得') === -1?'red':'green'">{{item.text}}</text>
      </view>
      <text class="time" style="margin-left: 15px;">{{item.time}}</text>
    </view>

  </view>
</template>

<script setup>
  import {ref} from 'vue'
  import {useListStore} from '@/store/pinia/yeStore'
  const url = 'https://cdn3.axureshop.com/demo/2027306/images/%E9%A6%96%E9%A1%B5/u11.png'
  const url2 = 'https://cdn3.axureshop.com/demo/2027306/images/%E6%88%91%E7%9A%84%E7%A7%AF%E5%88%86/u12964.png'
  const duiHuan = useListStore()
  const productList=duiHuan.Productname
  // 跳转到积分商城
  const toJifen = () => {
    uni.switchTab({
      url: '/pages/shopping/shopping'
    });
  }
</script>

<style lang="scss" scoped>
  .bigTopBox {
    position: relative;
    height: 112px;
    background-color: rgba(51, 51, 51, 1);
    color: white;

    .textLis1 {
      position: absolute;
      top: 13%;
      left: 5%;
    }

    .textLis2 {
      position: absolute;
      top: 40%;
      left: 8%;
    }

    .textLis3 {
      position: absolute;
      top: 20%;
      right: 20%;
    }

    .textLis4 {
      position: absolute;
      top: 50%;
      right: 20%;
    }
  }

  .bigHeaderbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    /* margin-top: 60px; */
    height: 45px;
    border: 1px solid rgba(204, 204, 204, 1);

    .urlimge {
      width: 32px;
      height: 32px;
      margin: 0 10px;
      vertical-align: middle;
    }

    .icoMg {
      .urlimge2 {
        width: 24px;
        height: 24px;
        vertical-align: middle;
        margin: 0 10px;
      }
    }
  }

  .footList {
    height: 62px;
    line-height: 36px;
    border: 1px solid rgba(204, 204, 204, 1);
    .time{
      position: relative;
      top:-10px;
      font-size: 12px;
      color: #999999;
    }
    .flist{
      display: flex;
      justify-content: space-between;
      .productName {
      margin-left: 15px;
    }
    .green {
      color: green;
      margin-right: 15px;
    }
    .red {
      color: red;
      margin-right: 15px;
    }
    }
  }
</style>
